<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="//www.layuicdn.com/layui/css/layui.css" />
    <title>个人空间</title>
    <link rel="stylesheet" th:href="@{static/css/index.css}">
</head>
<body>
<div th:include="include.html"></div>

<div id="IndexImg">
    <img src="../static/img/index/indexContainer.jpg" alt=""  style=" width:300px;height:300px;border-radius:500px;margin-left: 150px;" >
</div>
<!--    <ul></ul>-->
<div id="indexSpan">
    <ul class="list-group">
        <li class="list-group-item" style="font-size: 20px"> 姓名：<span style="font-size: 20px">Ben</span></li>
        <li class="list-group-item" style="font-size: 20px"> 姓别：<span style="font-size: 20px">男</span></li>
        <li class="list-group-item" style="font-size: 20px"> 年龄：<span style="font-size: 20px">20岁</span></li>
        <li class="list-group-item" style="font-size: 20px"> 邮箱：<a href="https://mail.163.com/js6/main.jsp?sid=pBdHKLdhEoaHMuqHizhhVvwjzCzakORQ&df=mail163_letter#module=welcome.WelcomeModule%7C%7B%7D" style="font-size: 20px">xxswhy109@163.com</a></li>
        <li class="list-group-item" style="font-size: 20px"> Gitee：<a href="https://gitee.com/Ben00000/events" style="font-size: 20px">https://gitee.com/Ben00000/events</a></li>
        <li class="list-group-item" style="font-size: 20px"> GitHub：<a href="https://github.com/BenBenBen0000" style="font-size: 20px">https://github.com/BenBenBen0000</a></li>
    </ul>
    </div>


<div id="lunBo" class="carousel slide" data-ride="carousel" style="bottom: 200px">

    <!-- 指示符 -->
    <ul class="carousel-indicators">
        <li data-target="#lunBo" data-slide-to="0" class="active"></li>
        <li data-target="#lunBo" data-slide-to="1"></li>
        <li data-target="#lunBo" data-slide-to="2"></li>
        <li data-target="#lunBo" data-slide-to="3"></li>
        <li data-target="#lunBo" data-slide-to="4"></li>
        <li data-target="#lunBo" data-slide-to="5"></li>
        <li data-target="#lunBo" data-slide-to="6"></li>
        <li data-target="#lunBo" data-slide-to="7"></li>
        <li data-target="#lunBo" data-slide-to="8"></li>
        <li data-target="#lunBo" data-slide-to="9"></li>
        <li data-target="#lunBo" data-slide-to="10"></li>
        <li data-target="#lunBo" data-slide-to="11"></li>
        <li data-target="#lunBo" data-slide-to="12"></li>
        <li data-target="#lunBo" data-slide-to="13"></li>
        <li data-target="#lunBo" data-slide-to="14"></li>
        <li data-target="#lunBo" data-slide-to="15"></li>
        <li data-target="#lunBo" data-slide-to="16"></li>
        <li data-target="#lunBo" data-slide-to="17"></li>
        <li data-target="#lunBo" data-slide-to="18"></li>
        <li data-target="#lunBo" data-slide-to="19"></li>
    </ul>

    <!-- 轮播图片 -->
    <div class="carousel-inner">
        <div class="carousel-item active">
            <img src="https://static.runoob.com/images/mix/img_fjords_wide.jpg">
            <div class="carousel-caption">
                <h3>第一张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_nature_wide.jpg">
            <div class="carousel-caption">
                <h3>第二张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第三张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第四张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第五张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第六张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第七张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第八张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第九张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第十张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第十一张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第十二张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第十三张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第十四张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第十五张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第十六张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第十七张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第十八张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第十九张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
        <div class="carousel-item">
            <img src="https://static.runoob.com/images/mix/img_mountains_wide.jpg">
            <div class="carousel-caption">
                <h3>第二十张图片描述标题</h3>
                <p>描述文字!</p>
            </div>
        </div>
    </div>

    <!-- 左右切换按钮 -->
    <a class="carousel-control-prev" href="#lunBo" data-slide="prev">
        <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#lunBo" data-slide="next">
        <span class="carousel-control-next-icon"></span>
    </a>
</div>


<div id="botton" >
   <p>
        <a>Copyright © 2019.Ben name All rights reserved</a>
        <br>
        <a>豫ICP备19032529号</a>
   </p>
</div>
</div>

<!--<div >-->
<!--    <img src="../static/img/index/indexContainer.jpg" alt="" id="divImg">-->
<!--</div>-->

<!--<div class = " container " style="margin-top: 0px;position: relative;bottom: 400px;color: white" >-->
<!--    <h2> <i>日子缓缓地过着，我们也慢慢的长大。希望当我们长大之后，面对那些过去的青春还有韶华，都能轻轻道一句“你好啊，我的旧时光”。就算过去很多年，那些旧时光里的人，依然光芒万丈。-->
<!--        以后的日子，漫长又匆匆，愿你我都能带着曾经的美好和温暖走下去吧。-->
<!--    </i></h2>-->
<!--</div>-->










<!--<ul class="layui-nav layui-nav-tree layui-bg-blue" lay-filter="test">-->
<!--    &lt;!&ndash; 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> &ndash;&gt;-->
<!--    <li class="layui-nav-item layui-nav-itemed">-->
<!--        <a href="javascript:;">默认展开</a>-->
<!--        <dl class="layui-nav-child">-->
<!--            <dd><a href="javascript:;">选项1</a></dd>-->
<!--            <dd><a href="javascript:;">选项2</a></dd>-->
<!--            <dd><a href="">跳转</a></dd>-->
<!--        </dl>-->
<!--    </li>-->
<!--    <li class="layui-nav-item">-->
<!--        <a href="javascript:;">解决方案</a>-->
<!--        <dl class="layui-nav-child">-->
<!--            <dd><a href="">移动模块</a></dd>-->
<!--            <dd><a href="">后台模版</a></dd>-->
<!--            <dd><a href="">电商平台</a></dd>-->
<!--        </dl>-->
<!--    </li>-->
<!--    <li class="layui-nav-item"><a href="">产品</a></li>-->
<!--    <li class="layui-nav-item"><a href="">大数据</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--    <li class="layui-nav-item"><a href="">社区</a></li>-->
<!--</ul>-->


<!--<div style="text-align:center">-->
<!--    <button onclick="playPause()">播放/暂停</button>-->
<!--    <button onclick="makeBig()">放大</button>-->
<!--    <button onclick="makeSmall()">缩小</button>-->
<!--    <button onclick="makeNormal()">普通</button>-->
<!--    <br>-->
<!--    <video id="video1" width="420">-->
<!--        <source src="../static/video/QQ视频20190726102103.mp4" type="video/mp4">-->
<!--&lt;!&ndash;        <source src="mov_bbb.ogg" type="video/ogg">&ndash;&gt;-->
<!--        您的浏览器不支持 HTML5 video 标签。-->
<!--    </video>-->
<!--</div>-->



<script src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/twitter-bootstrap/4.1.0/js/bootstrap.min.js"></script>
<script src="//www.layuicdn.com/layui/layui.js"></script>
    <script th:src="@{static/js/index.js}"></script>

<!--<script>-->
<!--    var myVideo=document.getElementById("video1");-->

<!--    function playPause()-->
<!--    {-->
<!--        if (myVideo.paused)-->
<!--            myVideo.play();-->
<!--        else-->
<!--            myVideo.pause();-->
<!--    }-->

<!--    function makeBig()-->
<!--    {-->
<!--        myVideo.width=560;-->
<!--    }-->

<!--    function makeSmall()-->
<!--    {-->
<!--        myVideo.width=320;-->
<!--    }-->

<!--    function makeNormal()-->
<!--    {-->
<!--        myVideo.width=420;-->
<!--    }-->
<!--</script>-->
<script>
        //一般直接写在一个js文件中
        layui.use(['layer', 'form','element'], function(){
            var layer = layui.layer;
            var form = layui.form;
            var element = layui.element;

            // layer.msg('Hello World');
        });
    </script>
</body>
</html>